figure {
  font-size: 0; // fix whitespace causing percentage issues
  margin: 2rem 0;
  position: relative;
  text-align: center;

  article & p {
    max-width: 100%; // Fix Markdown wrapping images in `<p>` and setting max-width
  }

  * {
    margin: 0;
    max-width: 100%;
  }

  img,
  video {
    display: inline;
    transition: transform 250ms ease;
    vertical-align: middle;

    &:active,
    &:focus {
      outline: none;
      position: relative; // Fixes z-index issues on transform
      z-index: 1;
    }
  }

  .highlighter-rouge {
    font-size: 1rem;
    margin-bottom: 0;
  }

  &.embed {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    padding-top: 56.25%; // 16:9
    position: relative;
    width: var(--content-width);

    iframe {
      border: none;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
  }

  figcaption {
    font-family: var(--ui-font);
    font-size: 0.8rem;
    margin: 1em auto 4em;
    opacity: 0.67;
    text-align: center;
  }

  &.third {
    img,
    video {
      cursor: zoom-in;
      margin: 1%;
      max-width: 31.33%;

      &:focus {
        cursor: zoom-out;
      }

      &:nth-child(3n+1):active,
      &:nth-child(3n+1):focus {
        transform: translateX(100%) scale(3);
      }

      &:nth-child(3n+2):active,
      &:nth-child(3n+2):focus {
        transform: translateX(0) scale(3);
      }

      &:nth-child(3n+3):active,
      &:nth-child(3n+3):focus {
        transform: translateX(-100%) scale(3);
      }
    }
  }

  &.half {
    img,
    video {
      cursor: zoom-in;
      margin: 1%;
      max-width: 48%;

      &:focus {
        cursor: zoom-out;
      }

      &:nth-child(odd):active,
      &:nth-child(odd):focus {
        transform: translateX(50%) scale(2);
      }

      &:nth-child(even):active,
      &:nth-child(even):focus {
        transform: translateX(-50%) scale(2);
      }
    }
  }

  &.full-bleed {
    img,
    video {
      left: 50%;
      max-width: 100vw;
      position: relative;
      transform: translateX(-50%);
      width: 100vw;
    }
  }

  &.constrained {
    img,
    video {
      width: var(--content-width);
    }
  }

  &.circle {
    img,
    video {
      border-radius: 50%;
    }
  }

  &.card {
    img,
    video {
      background-color: var(--silver-100);
      box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.05),
        0 3px 3px rgba(0, 0, 0, 0.22);

      @media (prefers-color-scheme: dark) {
        background-color: var(--silver-900);
      }
    }
  }
}
